<template>
  <div class="message" @click="turnToMessage">
    <el-badge v-if="unRead" :value="unRead" class="item">
      <svg-icon
        :icon-class="'bell'"
        :class="isWindow7 ? 'c-#333' : 'c-white'"
        class="text-[17px] !mr-0"
      />
    </el-badge>
    <svg-icon
      :class="isWindow7 ? 'c-#333' : 'c-white'"
      v-else
      :icon-class="'bell'"
      class="text-[17px] !mr-0"
    />
  </div>
</template>

<script setup lang="ts">
import router from "@/router";
import { storeToRefs } from "pinia";
import { useUserStoreHook } from "@/store/modules/user";

const userStore = useUserStoreHook();
const { unRead, isWindow7 } = storeToRefs(userStore);

function turnToMessage() {
  // 跳转到消息中心页面
  router.push({
    path: "/workbench/sysmessage",
  });
}
</script>

<style scoped lang="scss">
:deep(.el-badge__content.is-fixed) {
  top: 12px;
}
.message {
  display: flex;
  align-items: center;
}
.message-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 260px;
  line-height: 45px;
}
.message-list {
  display: flex;
  flex-direction: column;
  .message-item {
    display: flex;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--el-border-color-light);
    &:last-child {
      border: none;
    }
    .message-icon {
      width: 40px;
      height: 40px;
      margin: 0 20px 0 5px;
    }
    .message-content {
      display: flex;
      flex-direction: column;
      .message-title {
        margin-bottom: 5px;
      }
      .message-date {
        font-size: 12px;
        color: var(--el-text-color-secondary);
      }
    }
  }
}
</style>
